<template>
  <div class="container">
    <div class="left-panel">
      <div class="instructions">
        <div class="header">
          <h3>请点击需要执行的指令：</h3>
        </div>
        <!-- 为每个指令 div 添加 @click 事件，点击时将指令赋值给 newMessage -->
<!--        主要修改点：-->
<!--        状态管理: 新增了 activeCommand 属性，用于跟踪当前被点击的指令。-->
<!--        样式处理: 在每个指令的 div 中使用 :class 来应用 active 类，当指令被点击时，该指令会变成蓝色。-->
<!--        定时恢复: 在 setMessage 方法中，使用 setTimeout 来在 2 秒后将 activeCommand 恢复为空，从而使颜色恢复到原来的状态。-->
<!--        现在，当你点击任何指令时，它会变成蓝色，并在 2 秒后恢复原来的颜色。如果你需要进一步调整或有其他问题，请告诉我！-->
        <div
          @click="setMessage('MACHINE_ALL_START 1')"
          :class="{ active: activeCommand === 'MACHINE_ALL_START 1' }">
          START_THREAD_1 = "MACHINE_ALL_START 1"
        </div>
        <div
          @click="setMessage('MACHINE_ALL_STOP 1')"
          :class="{ active: activeCommand === 'MACHINE_ALL_STOP 1' }">
          STOP_THREAD_1 = "MACHINE_ALL_STOP 1"
        </div>
        <div
          @click="setMessage('ALARM_ALL_START 2')"
          :class="{ active: activeCommand === 'ALARM_ALL_START 2' }">
          START_THREAD_2 = "ALARM_ALL_START 2"
        </div>
        <div
          @click="setMessage('ALARM_ALL_STOP 2')"
          :class="{ active: activeCommand === 'ALARM_ALL_STOP 2' }">
          STOP_THREAD_2 = "ALARM_ALL_STOP 2"
        </div>
        <div
          @click="setMessage('SJFX_ALL_START 3')"
          :class="{ active: activeCommand === 'SJFX_ALL_START 3' }">
          START_THREAD_3 = "SJFX_ALL_START 3"
        </div>
        <div
          @click="setMessage('SJFX_ALL_STOP 3')"
          :class="{ active: activeCommand === 'SJFX_ALL_STOP 3' }">
          STOP_THREAD_3 = "SJFX_ALL_STOP 3"
        </div>
      </div>
      <div class="input-area">
        <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type a message..." />
        <div class="time-inputs">
          <label for="startTime">Start Time:</label>
<!--          <input type="datetime-local" v-model="startTime" id="startTime" />-->
          <input type="datetime-local" v-model="startTime" id="startTime" @change="updateDateTime('start')" />
          <label for="endTime">End Time:</label>
<!--          <input type="datetime-local" v-model="endTime" id="endTime" />-->
          <input type="datetime-local" v-model="endTime" id="endTime" @change="updateDateTime('end')" />
        </div>
        <div class="button-group">
          <div>生产:</div>
          <button @click="sendWithTime">Send with Time</button>
          <button @click="sendWithTime1">Send with Time1 虚机和告警</button>
          <div>办公:</div>
          <button @click="sendSjfx">Send Sjfx 数据分析</button>
        </div>
      </div>
    </div>
    <div class="right-panel">
      <div class="header">
        <h3>内容输出：</h3>
        <button @click="clearMessages" class="clear-button">清除内容</button>
      </div>
      <div v-for="msg in messages" :key="msg.ip + msg.message" class="message">
        <strong>{{ msg.ip }}:</strong> {{ msg.message }}
        <strong>{{ msg.api_response }}</strong>
      </div>
    </div>
  </div>
</template>

<script>
import io from 'socket.io-client'

export default {
  name: 'Chat',
  data () {
    return {
      socket: null,
      messages: [],
      newMessage: '',
      startTime: '',
      endTime: '',
      activeCommand: '' // 新增属性用于存储当前激活的指令
    }
  },
  created () {
    // this.socket = io('http://22.188.110.216:5002') // 修改为你的后端地址
    // this.socket = io('http://127.0.0.1:5002') // 修改为你的后端地址
    this.socket = io(process.env.API_ROOT)
    console.log('socket connect to api' + process.env.API_ROOT)
    this.socket.on('message', (msg) => {
      console.log(msg)
      this.messages.push(msg)
    })

    const now = new Date()
    const prior24Hours = new Date(now.getTime() - 24 * 60 * 60 * 1000)
    this.startTime = this.formatDateTimeLocal(prior24Hours)
    this.endTime = this.formatDateTimeLocal(now)
  },
  methods: {
    setMessage (message) {
      this.newMessage = message
      this.activeCommand = message // 设置当前激活的指令
      setTimeout(() => {
        this.activeCommand = '' // 2秒后恢复原来的颜色
      }, 2000)
    },
    sendMessage () {
      const msg = { text: this.newMessage }
      this.socket.emit('message', msg.text)
      this.newMessage = ''
    },
    sendWithTime () {
      if (!this.startTime || !this.endTime) {
        alert('Please select both start and end time.')
        return
      }

      const msg = {
        text: this.newMessage,
        startTime: this.startTime,
        endTime: this.endTime
      }

      this.socket.emit('message_with_time', msg)
      this.newMessage = ''
    },
    sendWithTime1 () {
      if (!this.startTime || !this.endTime) {
        alert('Please select both start and end time.')
        return
      }

      const msg = {
        text: this.newMessage,
        startTime: this.startTime,
        endTime: this.endTime
      }

      this.socket.emit('message_with_time1', msg)
      this.newMessage = ''
    },

    sendSjfx () {
      if (!this.startTime || !this.endTime) {
        alert('Please select both start and end time.')
        return
      }

      const msg = {
        text: this.newMessage,
        startTime: this.startTime,
        endTime: this.endTime
      }
      console.log(msg.text)

      this.socket.emit('message_sjfx', msg)
      this.newMessage = ''
    },
    formatDateTimeLocal (date) {
      const pad = (n) => n < 10 ? '0' + n : n
      const year = date.getFullYear()
      const month = pad(date.getMonth() + 1)
      const day = pad(date.getDate())
      const hours = pad(date.getHours())
      const minutes = pad(date.getMinutes())
      const seconds = pad(date.getSeconds())
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    updateDateTime (type) {
      const date = new Date(type === 'start' ? this.startTime : this.endTime)
      if (type === 'start') {
        this.startTime = this.formatDateTimeLocal(date)
      } else {
        this.endTime = this.formatDateTimeLocal(date)
      }
    },
    clearMessages () {
      this.messages = []
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  height: 100vh;
}

.left-panel {
  width: 40%;
  padding: 20px;
  border-right: 1px solid #ccc;
  overflow-y: auto;
}

.right-panel {
  width: 60%;
  padding: 20px;
  overflow-y: auto;
}

.instructions {
  margin-bottom: 20px;
}

.instructions div {
  cursor: pointer;
  padding: 10px;
  margin: 5px 0;
}

.instructions div.active {
  background-color: blue; /* 被点击时的背景颜色 */
  color: white; /* 被点击时的文字颜色 */
}

.input-area {
  display: flex;
  flex-direction: column;
}

input {
  width: 100%;
  margin-bottom: 10px;
  padding: 5px;
}

.time-inputs {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.button-group {
  display: flex;
  justify-content: space-between;
}

button {
  padding: 5px 10px;
}

.message {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

h3 {
  margin: 0;
}

.clear-button {
  margin-bottom: 10px;
  padding: 5px 10px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.clear-button:hover {
  background-color: #d32f2f;
}
</style>
